"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _vn = require("../..//ui/src/vn");
var _log = require("../../ui/src/log");
var _dom = require("../../ui/src/dom");
var _util = require("./util");
var _button = _interopRequireDefault(require("../../button/src/button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'VxeUpload',
  props: {
    modelValue: [Array, String, Object],
    showList: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showList
    },
    moreConfig: Object,
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    mode: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.mode
    },
    imageTypes: {
      type: Array,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.imageTypes, true)
    },
    imageConfig: {
      type: Object,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.imageConfig, true)
    },
    /**
     * 已废弃，被 image-config 替换
     * @deprecated
     */
    imageStyle: {
      type: Object,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.imageStyle, true)
    },
    fileTypes: {
      type: Array,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.fileTypes, true)
    },
    dragSort: Boolean,
    dragToUpload: {
      type: Boolean,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.dragToUpload, true)
    },
    pasteToUpload: {
      type: Boolean,
      default: () => _xeUtils.default.clone((0, _ui.getConfig)().upload.pasteToUpload, true)
    },
    keyField: String,
    singleMode: Boolean,
    urlMode: Boolean,
    multiple: Boolean,
    limitSize: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().upload.limitSize
    },
    limitCount: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().upload.limitCount
    },
    nameField: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.nameField
    },
    typeField: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.typeField
    },
    urlField: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.urlField
    },
    sizeField: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.sizeField
    },
    showErrorStatus: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showErrorStatus
    },
    showProgress: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showProgress
    },
    progressText: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.progressText
    },
    autoHiddenButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.autoHiddenButton
    },
    showUploadButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showUploadButton
    },
    buttonText: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.buttonText
    },
    buttonIcon: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.buttonIcon
    },
    showButtonText: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showButtonText
    },
    showButtonIcon: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showButtonIcon
    },
    showRemoveButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showRemoveButton
    },
    showDownloadButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showDownloadButton
    },
    showPreview: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().upload.showPreview
    },
    tipText: String,
    hintText: String,
    previewMethod: Function,
    uploadMethod: Function,
    beforeRemoveMethod: Function,
    removeMethod: Function,
    beforeDownloadMethod: Function,
    downloadMethod: Function,
    getUrlMethod: Function,
    getThumbnailUrlMethod: Function,
    size: {
      type: String,
      default: () => (0, _ui.getConfig)().upload.size || (0, _ui.getConfig)().size
    }
  },
  emits: ['update:modelValue', 'add', 'remove', 'remove-fail', 'download', 'download-fail', 'upload-success', 'upload-error', 'sort-dragend'],
  setup(props, context) {
    const {
      emit,
      slots
    } = context;
    const $xeForm = (0, _vue.inject)('$xeForm', null);
    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
    const $xeTable = (0, _vue.inject)('$xeTable', null);
    const xID = _xeUtils.default.uniqueId();
    const {
      computeSize
    } = (0, _ui.useSize)(props);
    const refElem = (0, _vue.ref)();
    const refPopupElem = (0, _vue.ref)();
    const refDragLineElem = (0, _vue.ref)();
    const refModalDragLineElem = (0, _vue.ref)();
    const reactData = (0, _vue.reactive)({
      isDragUploadStatus: false,
      showMorePopup: false,
      isActivated: false,
      fileList: [],
      fileCacheMaps: {},
      isDragMove: false,
      dragIndex: -1,
      dragTipText: ''
    });
    const internalData = {
      imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
      prevDragIndex: -1
      // prevDragPos: ''
    };
    const refMaps = {
      refElem
    };
    const computeFormReadonly = (0, _vue.computed)(() => {
      const {
        readonly
      } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = (0, _vue.computed)(() => {
      const {
        disabled
      } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeKeyField = (0, _vue.computed)(() => {
      return props.keyField || '_X_KEY';
    });
    const computeIsImage = (0, _vue.computed)(() => {
      return props.mode === 'image';
    });
    const computeNameProp = (0, _vue.computed)(() => {
      return props.nameField || 'name';
    });
    const computeTypeProp = (0, _vue.computed)(() => {
      return props.typeField || 'type';
    });
    const computeUrlProp = (0, _vue.computed)(() => {
      return props.urlField || 'url';
    });
    const computeSizeProp = (0, _vue.computed)(() => {
      return props.sizeField || 'size';
    });
    const computeLimitMaxSizeB = (0, _vue.computed)(() => {
      return _xeUtils.default.toNumber(props.limitSize) * 1024 * 1024;
    });
    const computeLimitMaxCount = (0, _vue.computed)(() => {
      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 1;
    });
    const computeOverCount = (0, _vue.computed)(() => {
      const {
        multiple
      } = props;
      const {
        fileList
      } = reactData;
      const limitMaxCount = computeLimitMaxCount.value;
      if (multiple) {
        if (limitMaxCount) {
          return fileList.length >= limitMaxCount;
        }
        return true;
      }
      return fileList.length >= 1;
    });
    const computeLimitSizeUnit = (0, _vue.computed)(() => {
      const limitSize = _xeUtils.default.toNumber(props.limitSize);
      if (limitSize) {
        if (limitSize > 1048576) {
          return `${limitSize / 1048576}T`;
        }
        if (limitSize > 1024) {
          return `${limitSize / 1024}G`;
        }
        return `${limitSize}M`;
      }
      return '';
    });
    const computedDefHintText = (0, _vue.computed)(() => {
      const {
        limitSize,
        fileTypes,
        multiple,
        limitCount
      } = props;
      const tipText = props.tipText || props.hintText;
      const isImage = computeIsImage.value;
      const limitSizeUnit = computeLimitSizeUnit.value;
      if (_xeUtils.default.isString(tipText)) {
        return tipText;
      }
      const defHints = [];
      if (isImage) {
        if (multiple && limitCount) {
          defHints.push((0, _ui.getI18n)('vxe.upload.imgCountHint', [limitCount]));
        }
        if (limitSize && limitSizeUnit) {
          defHints.push((0, _ui.getI18n)('vxe.upload.imgSizeHint', [limitSizeUnit]));
        }
      } else {
        if (fileTypes && fileTypes.length) {
          defHints.push((0, _ui.getI18n)('vxe.upload.fileTypeHint', [fileTypes.join('/')]));
        }
        if (limitSize && limitSizeUnit) {
          defHints.push((0, _ui.getI18n)('vxe.upload.fileSizeHint', [limitSizeUnit]));
        }
        if (multiple && limitCount) {
          defHints.push((0, _ui.getI18n)('vxe.upload.fileCountHint', [limitCount]));
        }
      }
      return defHints.join((0, _ui.getI18n)('vxe.base.comma'));
    });
    const computeImageOpts = (0, _vue.computed)(() => {
      return Object.assign({}, props.imageConfig || props.imageStyle);
    });
    const computeImgStyle = (0, _vue.computed)(() => {
      const imageOpts = computeImageOpts.value;
      const {
        width,
        height
      } = imageOpts;
      const stys = {};
      if (width) {
        stys.width = (0, _dom.toCssUnit)(width);
      }
      if (height) {
        stys.height = (0, _dom.toCssUnit)(height);
      }
      return stys;
    });
    const computeMoreOpts = (0, _vue.computed)(() => {
      return Object.assign({
        showMoreButton: true
      }, props.moreConfig);
    });
    const computeMaps = {};
    const $xeUpload = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const getUniqueKey = () => {
      return _xeUtils.default.uniqueId();
    };
    const getFieldKey = item => {
      const keyField = computeKeyField.value;
      return item[keyField];
    };
    const updateFileList = () => {
      const {
        modelValue,
        multiple
      } = props;
      const formReadonly = computeFormReadonly.value;
      const keyField = computeKeyField.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const urlProp = computeUrlProp.value;
      const sizeProp = computeSizeProp.value;
      const fileList = modelValue ? (modelValue ? _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue] : []).map(item => {
        if (!item || _xeUtils.default.isString(item)) {
          const url = `${item || ''}`;
          const urlObj = _xeUtils.default.parseUrl(item);
          const name = (urlObj ? urlObj.searchQuery[nameProp] : '') || parseFileName(url);
          return {
            [nameProp]: name,
            [typeProp]: (urlObj ? urlObj.searchQuery[typeProp] : '') || parseFileType(name),
            [urlProp]: url,
            [sizeProp]: _xeUtils.default.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0,
            [keyField]: getUniqueKey()
          };
        }
        const name = item[nameProp] || '';
        item[nameProp] = name;
        item[typeProp] = item[typeProp] || parseFileType(name);
        item[urlProp] = item[urlProp] || '';
        item[sizeProp] = item[sizeProp] || 0;
        item[keyField] = item[keyField] || getUniqueKey();
        return item;
      }) : [];
      reactData.fileList = formReadonly || multiple ? fileList : fileList.slice(0, 1);
    };
    const parseFileName = url => {
      return decodeURIComponent(`${url || ''}`).split('/').pop() || '';
    };
    const parseFileType = name => {
      // 这里不用split('.').pop()因为没有后缀时会返回自身
      const index = name.lastIndexOf('.');
      if (index > 0) {
        return name.substring(index + 1).toLowerCase();
      }
      return '';
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, (0, _ui.createEvent)(evnt, {
        $upload: $xeUpload
      }, params));
    };
    const handleChange = value => {
      const {
        singleMode,
        urlMode
      } = props;
      const urlProp = computeUrlProp.value;
      const nameProp = computeNameProp.value;
      let restList = value ? value.slice(0) : [];
      if (urlMode) {
        restList = restList.map(item => {
          const url = item[urlProp];
          if (url) {
            const urlObj = _xeUtils.default.parseUrl(url);
            if (!urlObj.searchQuery[nameProp]) {
              return `${url}${url.indexOf('?') === -1 ? '?' : '&'}${nameProp}=${encodeURIComponent(item[nameProp] || '')}`;
            }
          }
          return url;
        });
      }
      emit('update:modelValue', singleMode ? restList[0] || null : restList);
    };
    const getThumbnailFileUrl = item => {
      const getThumbnailUrlFn = props.getThumbnailUrlMethod || (0, _ui.getConfig)().upload.getThumbnailUrlMethod;
      if (getThumbnailUrlFn) {
        return getThumbnailUrlFn({
          $upload: $xeUpload,
          option: item
        });
      }
      return getFileUrl(item);
    };
    const getFileUrl = item => {
      const getUrlFn = props.getUrlMethod || (0, _ui.getConfig)().upload.getUrlMethod;
      const urlProp = computeUrlProp.value;
      return getUrlFn ? getUrlFn({
        $upload: $xeUpload,
        option: item
      }) : item[urlProp];
    };
    const handleDefaultFilePreview = item => {
      const {
        imageTypes,
        showDownloadButton
      } = props;
      const typeProp = computeTypeProp.value;
      const beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
      const {
        imagePreviewTypes
      } = internalData;
      // 如果是预览图片
      if (imagePreviewTypes.concat(imageTypes || []).some(type => `${type}`.toLowerCase() === `${item[typeProp]}`.toLowerCase())) {
        if (_ui.VxeUI.previewImage) {
          _ui.VxeUI.previewImage({
            urlList: [getFileUrl(item)],
            showDownloadButton,
            beforeDownloadMethod: beforeDownloadFn ? () => {
              return beforeDownloadFn({
                $upload: $xeUpload,
                option: item
              });
            } : undefined
          });
        }
      }
    };
    const handlePreviewFileEvent = (evnt, item) => {
      const previewFn = props.previewMethod || (0, _ui.getConfig)().upload.previewMethod;
      if (props.showPreview) {
        if (previewFn) {
          previewFn({
            $upload: $xeUpload,
            option: item
          });
        } else {
          handleDefaultFilePreview(item);
        }
      }
    };
    const handlePreviewImageEvent = (evnt, item, index) => {
      const {
        showDownloadButton
      } = props;
      const {
        fileList
      } = reactData;
      const beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
      if (props.showPreview) {
        if (_ui.VxeUI.previewImage) {
          _ui.VxeUI.previewImage({
            urlList: fileList.map(item => getFileUrl(item)),
            activeIndex: index,
            showDownloadButton,
            beforeDownloadMethod: beforeDownloadFn ? ({
              index
            }) => {
              return beforeDownloadFn({
                $upload: $xeUpload,
                option: fileList[index]
              });
            } : undefined
          });
        }
      }
    };
    const handleUploadResult = (item, file) => {
      const {
        showErrorStatus
      } = props;
      const fileKey = getFieldKey(item);
      const uploadFn = props.uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
      if (uploadFn) {
        return Promise.resolve(uploadFn({
          $upload: $xeUpload,
          file,
          option: item,
          updateProgress(percentNum) {
            const {
              fileCacheMaps
            } = reactData;
            const cacheItem = fileCacheMaps[getFieldKey(item)];
            if (cacheItem) {
              cacheItem.percent = Math.max(0, Math.min(99, _xeUtils.default.toNumber(percentNum)));
            }
          }
        })).then(res => {
          const {
            fileCacheMaps
          } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.percent = 100;
          }
          Object.assign(item, res);
          dispatchEvent('upload-success', {
            option: item,
            data: res
          }, null);
        }).catch(res => {
          const {
            fileCacheMaps
          } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.status = 'error';
          }
          if (showErrorStatus) {
            Object.assign(item, res);
          } else {
            reactData.fileList = reactData.fileList.filter(obj => getFieldKey(obj) !== fileKey);
          }
          dispatchEvent('upload-error', {
            option: item,
            data: res
          }, null);
        }).finally(() => {
          const {
            fileCacheMaps
          } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.loading = false;
          }
        });
      } else {
        const {
          fileCacheMaps
        } = reactData;
        const cacheItem = fileCacheMaps[fileKey];
        if (cacheItem) {
          cacheItem.loading = false;
        }
      }
      return Promise.resolve();
    };
    const handleReUpload = item => {
      const {
        uploadMethod,
        urlMode
      } = props;
      const {
        fileCacheMaps
      } = reactData;
      const fileKey = getFieldKey(item);
      const cacheItem = fileCacheMaps[fileKey];
      const uploadFn = uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
      if (uploadFn && cacheItem) {
        const file = cacheItem.file;
        cacheItem.loading = true;
        cacheItem.status = '';
        cacheItem.percent = 0;
        handleUploadResult(item, file).then(() => {
          if (urlMode) {
            handleChange(reactData.fileList);
          }
        });
      }
    };
    const uploadFile = (files, evnt) => {
      const {
        multiple,
        urlMode
      } = props;
      const {
        fileList
      } = reactData;
      const uploadFn = props.uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
      const keyField = computeKeyField.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const urlProp = computeUrlProp.value;
      const sizeProp = computeSizeProp.value;
      const limitMaxSizeB = computeLimitMaxSizeB.value;
      const limitMaxCount = computeLimitMaxCount.value;
      const limitSizeUnit = computeLimitSizeUnit.value;
      let selectFiles = files;
      if (multiple && limitMaxCount) {
        // 校验文件数量
        if (fileList.length >= limitMaxCount) {
          if (_ui.VxeUI.modal) {
            _ui.VxeUI.modal.notification({
              title: (0, _ui.getI18n)('vxe.modal.errTitle'),
              status: 'error',
              content: (0, _ui.getI18n)('vxe.upload.overCountErr', [limitMaxCount])
            });
          }
          return;
        }
        const overNum = selectFiles.length - (limitMaxCount - fileList.length);
        if (overNum > 0) {
          const overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
          if (_ui.VxeUI.modal) {
            _ui.VxeUI.modal.notification({
              title: (0, _ui.getI18n)('vxe.modal.errTitle'),
              status: 'error',
              width: null,
              slots: {
                default() {
                  return (0, _vue.h)('div', {
                    class: 'vxe-upload--file-message-over-error'
                  }, [(0, _vue.h)('div', {}, (0, _ui.getI18n)('vxe.upload.overCountExtraErr', [limitMaxCount, overNum])), (0, _vue.h)('div', {
                    class: 'vxe-upload--file-message-over-extra'
                  }, overExtraList.map((file, index) => {
                    return (0, _vue.h)('div', {
                      key: index,
                      class: 'vxe-upload--file-message-over-extra-item'
                    }, file.name);
                  }))]);
                }
              }
            });
          }
        }
        selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
      }
      // 校验文件大小
      if (limitMaxSizeB) {
        for (let i = 0; i < files.length; i++) {
          const file = files[0];
          if (file.size > limitMaxSizeB) {
            if (_ui.VxeUI.modal) {
              _ui.VxeUI.modal.notification({
                title: (0, _ui.getI18n)('vxe.modal.errTitle'),
                status: 'error',
                content: (0, _ui.getI18n)('vxe.upload.overSizeErr', [limitSizeUnit])
              });
            }
            return;
          }
        }
      }
      const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
      const newFileList = multiple ? fileList : [];
      const uploadPromiseRests = [];
      selectFiles.forEach(file => {
        const {
          name
        } = file;
        const fileKey = getUniqueKey();
        const fileObj = {
          [nameProp]: name,
          [typeProp]: parseFileType(name),
          [sizeProp]: file.size,
          [urlProp]: URL.createObjectURL(file),
          [keyField]: fileKey
        };
        if (uploadFn) {
          cacheMaps[fileKey] = {
            file: file,
            loading: true,
            status: '',
            percent: 0
          };
        }
        const item = (0, _vue.reactive)(fileObj);
        if (uploadFn) {
          uploadPromiseRests.push(handleUploadResult(item, file));
        }
        newFileList.push(item);
        dispatchEvent('add', {
          option: item
        }, evnt);
      });
      reactData.fileList = newFileList;
      reactData.fileCacheMaps = cacheMaps;
      Promise.all(urlMode ? uploadPromiseRests : []).then(() => {
        handleChange(newFileList);
        // 自动更新校验状态
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, newFileList);
        }
      });
    };
    const handleChoose = evnt => {
      const {
        multiple,
        imageTypes,
        fileTypes
      } = props;
      const isDisabled = computeIsDisabled.value;
      const isImage = computeIsImage.value;
      if (isDisabled) {
        return Promise.resolve({
          status: false,
          files: [],
          file: null
        });
      }
      return (0, _util.readLocalFile)({
        multiple,
        types: isImage ? imageTypes : fileTypes
      }).then(params => {
        uploadFile(params.files, evnt);
        return params;
      });
    };
    const clickEvent = evnt => {
      handleChoose(evnt).catch(() => {
        // 错误文件类型
      });
    };
    const handleRemoveEvent = (evnt, item, index) => {
      const {
        fileList
      } = reactData;
      fileList.splice(index, 1);
      handleChange(fileList);
      // 自动更新校验状态
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList);
      }
      dispatchEvent('remove', {
        option: item
      }, evnt);
    };
    const removeFileEvent = (evnt, item, index) => {
      const beforeRemoveFn = props.beforeRemoveMethod || (0, _ui.getConfig)().upload.beforeRemoveMethod;
      const removeFn = props.removeMethod || (0, _ui.getConfig)().upload.removeMethod;
      Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
        $upload: $xeUpload,
        option: item
      }) : true).then(status => {
        if (status) {
          if (removeFn) {
            Promise.resolve(removeFn({
              $upload: $xeUpload,
              option: item
            })).then(() => {
              handleRemoveEvent(evnt, item, index);
            }).catch(e => e);
          } else {
            handleRemoveEvent(evnt, item, index);
          }
        } else {
          dispatchEvent('remove-fail', {
            option: item
          }, evnt);
        }
      });
    };
    const handleDownloadEvent = (evnt, item) => {
      dispatchEvent('download', {
        option: item
      }, evnt);
    };
    const downloadFileEvent = (evnt, item) => {
      const beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
      const downloadFn = props.downloadMethod || (0, _ui.getConfig)().upload.downloadMethod;
      Promise.resolve(beforeDownloadFn ? beforeDownloadFn({
        $upload: $xeUpload,
        option: item
      }) : true).then(status => {
        if (status) {
          if (downloadFn) {
            Promise.resolve(downloadFn({
              $upload: $xeUpload,
              option: item
            })).then(() => {
              handleDownloadEvent(evnt, item);
            }).catch(e => e);
          } else {
            handleDownloadEvent(evnt, item);
          }
        } else {
          dispatchEvent('download-fail', {
            option: item
          }, evnt);
        }
      });
    };
    const handleUploadDragleaveEvent = evnt => {
      const targetElem = evnt.currentTarget;
      const {
        clientX,
        clientY
      } = evnt;
      if (targetElem) {
        const {
          x: targetX,
          y: targetY,
          height: targetHeight,
          width: targetWidth
        } = targetElem.getBoundingClientRect();
        if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
          reactData.isDragUploadStatus = false;
        }
      }
    };
    const handleUploadDragoverEvent = evnt => {
      const dataTransfer = evnt.dataTransfer;
      if (dataTransfer) {
        const {
          items
        } = dataTransfer;
        if (items && items.length) {
          evnt.preventDefault();
          reactData.isDragUploadStatus = true;
        }
      }
    };
    const uploadTransferFileEvent = (evnt, files) => {
      const {
        imageTypes
      } = props;
      const {
        imagePreviewTypes
      } = internalData;
      const isImage = computeIsImage.value;
      if (isImage) {
        const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
        files = files.filter(file => {
          const fileType = `${file.type.split('/')[1] || ''}`.toLowerCase();
          if (pasteImgTypes.some(type => `${type}`.toLowerCase() === fileType)) {
            return true;
          }
          return false;
        });
      }
      // 如果全部不满足条件
      if (!files.length) {
        if (_ui.VxeUI.modal) {
          _ui.VxeUI.modal.notification({
            title: (0, _ui.getI18n)('vxe.modal.errTitle'),
            status: 'error',
            content: (0, _ui.getI18n)('vxe.upload.uploadTypeErr')
          });
        }
        return;
      }
      uploadFile(files, evnt);
    };
    const handleUploadDropEvent = evnt => {
      const dataTransfer = evnt.dataTransfer;
      if (dataTransfer) {
        const {
          items
        } = dataTransfer;
        if (items && items.length) {
          evnt.preventDefault();
          const files = handleTransferFiles(items);
          if (files.length) {
            uploadTransferFileEvent(evnt, files);
          }
        }
      }
      reactData.isDragUploadStatus = false;
    };
    const handleTransferFiles = items => {
      const files = [];
      _xeUtils.default.arrayEach(items, item => {
        const file = item.getAsFile();
        if (file) {
          files.push(file);
        }
      });
      return files;
    };
    const handleMoreEvent = () => {
      const formReadonly = computeFormReadonly.value;
      const isImage = computeIsImage.value;
      if (_ui.VxeUI.modal) {
        _ui.VxeUI.modal.open({
          title: formReadonly ? (0, _ui.getI18n)('vxe.upload.morePopup.readTitle') : (0, _ui.getI18n)(`vxe.upload.morePopup.${isImage ? 'imageTitle' : 'fileTitle'}`),
          width: 660,
          height: 500,
          escClosable: true,
          showMaximize: true,
          resize: true,
          maskClosable: true,
          slots: {
            default() {
              const {
                showErrorStatus,
                dragToUpload,
                dragSort
              } = props;
              const {
                isActivated,
                isDragMove,
                isDragUploadStatus,
                dragIndex
              } = reactData;
              const {
                fileList
              } = reactData;
              const isDisabled = computeIsDisabled.value;
              const ons = {};
              if (dragToUpload && dragIndex === -1) {
                ons.onDragover = handleUploadDragoverEvent;
                ons.onDragleave = handleUploadDragleaveEvent;
                ons.onDrop = handleUploadDropEvent;
              }
              return (0, _vue.h)('div', Object.assign({
                ref: refPopupElem,
                class: ['vxe-upload--more-popup', {
                  'is--readonly': formReadonly,
                  'is--disabled': isDisabled,
                  'is--active': isActivated,
                  'show--error': showErrorStatus,
                  'is--drag': isDragUploadStatus
                }]
              }, ons), [isImage ? dragSort ? (0, _vue.h)(_vue.TransitionGroup, {
                name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
                tag: 'div',
                class: 'vxe-upload--image-more-list'
              }, {
                default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
              }) : (0, _vue.h)('div', {
                class: 'vxe-upload--image-more-list'
              }, renderImageItemList(fileList, true).concat(renderImageAction(true))) : (0, _vue.h)('div', {
                class: 'vxe-upload--file-more-list'
              }, [renderFileAction(true), dragSort ? (0, _vue.h)(_vue.TransitionGroup, {
                name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
                tag: 'div',
                class: 'vxe-upload--file-list'
              }, {
                default: () => renderFileItemList(fileList, false)
              }) : (0, _vue.h)('div', {
                class: 'vxe-upload--file-list'
              }, renderFileItemList(fileList, true))]), dragSort ? (0, _vue.h)('div', {
                ref: refModalDragLineElem,
                class: 'vxe-upload--drag-line'
              }) : (0, _ui.renderEmptyElement)($xeUpload), isDragUploadStatus ? (0, _vue.h)('div', {
                class: 'vxe-upload--drag-placeholder'
              }, (0, _ui.getI18n)('vxe.upload.dragPlaceholder')) : (0, _ui.renderEmptyElement)($xeUpload)]);
            }
          },
          onShow() {
            reactData.showMorePopup = true;
          },
          onHide() {
            reactData.showMorePopup = false;
          }
        });
      }
    };
    const showDropTip = (evnt, dragEl, dragPos) => {
      const {
        showMorePopup
      } = reactData;
      const el = refElem.value;
      const popupEl = refPopupElem.value;
      const wrapperEl = showMorePopup ? popupEl : el;
      if (!wrapperEl) {
        return;
      }
      const wrapperRect = wrapperEl.getBoundingClientRect();
      const ddLineEl = refDragLineElem.value;
      const mdLineEl = refModalDragLineElem.value;
      const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
      if (currDLineEl) {
        const dragRect = dragEl.getBoundingClientRect();
        currDLineEl.style.display = 'block';
        currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
        currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
        currDLineEl.style.height = `${dragRect.height}px`;
        currDLineEl.style.width = `${dragRect.width - 1}px`;
        currDLineEl.setAttribute('drag-pos', dragPos);
      }
    };
    const hideDropTip = () => {
      const ddLineEl = refDragLineElem.value;
      const mdLineEl = refModalDragLineElem.value;
      if (ddLineEl) {
        ddLineEl.style.display = '';
      }
      if (mdLineEl) {
        mdLineEl.style.display = '';
      }
    };
    // 拖拽
    const handleDragSortDragstartEvent = evnt => {
      evnt.stopPropagation();
      if (evnt.dataTransfer) {
        evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0);
      }
      const dragEl = evnt.currentTarget;
      const parentEl = dragEl.parentElement;
      const dragIndex = _xeUtils.default.findIndexOf(Array.from(parentEl.children), item => dragEl === item);
      reactData.isDragMove = true;
      reactData.dragIndex = dragIndex;
      setTimeout(() => {
        reactData.isDragMove = false;
      }, 500);
    };
    const handleDragSortDragoverEvent = evnt => {
      evnt.stopPropagation();
      evnt.preventDefault();
      const {
        dragIndex
      } = reactData;
      if (dragIndex === -1) {
        return;
      }
      const isImage = computeIsImage.value;
      const dragEl = evnt.currentTarget;
      const parentEl = dragEl.parentElement;
      const currIndex = _xeUtils.default.findIndexOf(Array.from(parentEl.children), item => dragEl === item);
      let dragPos = '';
      if (isImage) {
        const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
        dragPos = offsetX < dragEl.clientWidth / 2 ? 'left' : 'right';
      } else {
        const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
        dragPos = offsetY < dragEl.clientHeight / 2 ? 'top' : 'bottom';
      }
      if (dragIndex === currIndex) {
        showDropTip(evnt, dragEl, dragPos);
        return;
      }
      showDropTip(evnt, dragEl, dragPos);
      internalData.prevDragIndex = currIndex;
      internalData.prevDragPos = dragPos;
    };
    const handleDragSortDragendEvent = evnt => {
      const {
        fileList,
        dragIndex
      } = reactData;
      const {
        prevDragIndex,
        prevDragPos
      } = internalData;
      const oldIndex = dragIndex;
      const targetIndex = prevDragIndex;
      const dragOffsetIndex = prevDragPos === 'bottom' || prevDragPos === 'right' ? 1 : 0;
      const oldItem = fileList[oldIndex];
      const newItem = fileList[targetIndex];
      if (oldItem && newItem) {
        fileList.splice(oldIndex, 1);
        const ptfIndex = _xeUtils.default.findIndexOf(fileList, item => newItem === item);
        const nIndex = ptfIndex + dragOffsetIndex;
        fileList.splice(nIndex, 0, oldItem);
        dispatchEvent('sort-dragend', {
          oldItem: oldItem,
          newItem: newItem,
          dragPos: prevDragPos,
          offsetIndex: dragOffsetIndex,
          _index: {
            newIndex: nIndex,
            oldIndex: oldIndex
          }
        }, evnt);
      }
      hideDropTip();
      reactData.dragIndex = -1;
    };
    const handleItemMousedownEvent = evnt => {
      if ($xeTable) {
        evnt.stopPropagation();
      }
      reactData.isActivated = true;
    };
    const handleGlobalPasteEvent = evnt => {
      const {
        pasteToUpload
      } = props;
      const {
        isActivated
      } = reactData;
      if (!isActivated || !pasteToUpload) {
        return;
      }
      const clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
      if (!clipboardData) {
        return;
      }
      const {
        items
      } = clipboardData;
      if (!items) {
        return;
      }
      const files = handleTransferFiles(items);
      if (files.length) {
        evnt.preventDefault();
        uploadTransferFileEvent(evnt, files);
      }
    };
    const handleGlobalMousedownEvent = evnt => {
      const el = refElem.value;
      const popupEl = refPopupElem.value;
      let isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag;
      if (!isActivated && popupEl) {
        const parentEl = popupEl.parentElement || popupEl;
        const modalEl = parentEl ? parentEl.parentElement : parentEl;
        isActivated = (0, _dom.getEventTargetNode)(evnt, modalEl).flag;
      }
      reactData.isActivated = isActivated;
    };
    const handleGlobalBlurEvent = () => {
      reactData.isActivated = false;
    };
    const uploadMethods = {
      dispatchEvent,
      choose() {
        return handleChoose(null);
      }
    };
    const uploadPrivateMethods = {};
    Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
    const renderFileItemList = (currList, isMoreView) => {
      const {
        showRemoveButton,
        showDownloadButton,
        showProgress,
        progressText,
        showPreview,
        showErrorStatus,
        dragSort
      } = props;
      const {
        fileCacheMaps
      } = reactData;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const cornerSlot = slots.corner;
      const ons = {};
      if (dragSort && currList.length > 1) {
        ons.onDragstart = handleDragSortDragstartEvent;
        ons.onDragover = handleDragSortDragoverEvent;
        ons.onDragend = handleDragSortDragendEvent;
      }
      return currList.map((item, index) => {
        const fileKey = getFieldKey(item);
        const cacheItem = fileCacheMaps[fileKey];
        const isLoading = cacheItem && cacheItem.loading;
        const isError = cacheItem && cacheItem.status === 'error';
        return (0, _vue.h)('div', Object.assign({
          key: dragSort ? fileKey : index,
          class: ['vxe-upload--file-item', {
            'is--preview': showPreview,
            'is--loading': isLoading,
            'is--error': isError
          }],
          fileid: fileKey,
          draggable: dragSort ? true : null
        }, ons), [(0, _vue.h)('div', {
          class: 'vxe-upload--file-item-icon'
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || (0, _ui.getIcon)().UPLOAD_FILE_TYPE_DEFAULT
        })]), (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-name',
          onClick(evnt) {
            if (!isLoading && !isError) {
              handlePreviewFileEvent(evnt, item);
            }
          }
        }, `${item[nameProp] || ''}`), isLoading ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-loading-icon'
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)().UPLOAD_LOADING
        })]) : (0, _vue.createCommentVNode)(), showProgress && isLoading && cacheItem ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-loading-text'
        }, progressText ? _xeUtils.default.toFormatString(progressText, {
          percent: cacheItem.percent
        }) : (0, _ui.getI18n)('vxe.upload.uploadProgress', [cacheItem.percent])) : (0, _vue.createCommentVNode)(), showErrorStatus && isError ? (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-error'
        }, [(0, _vue.h)(_button.default, {
          icon: (0, _ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD,
          mode: 'text',
          status: 'primary',
          content: (0, _ui.getI18n)('vxe.upload.reUpload'),
          onClick() {
            handleReUpload(item);
          }
        })]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-btn-wrapper'
        }, [cornerSlot ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-corner'
        }, (0, _vn.getSlotVNs)(cornerSlot({
          option: item,
          isMoreView,
          readonly: formReadonly
        }))) : (0, _vue.createCommentVNode)(), showDownloadButton && !isLoading ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-download-btn',
          onClick(evnt) {
            downloadFileEvent(evnt, item);
          }
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)().UPLOAD_FILE_DOWNLOAD
        })]) : (0, _vue.createCommentVNode)(), showRemoveButton && !formReadonly && !isDisabled && !isLoading ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-remove-btn',
          onClick(evnt) {
            removeFileEvent(evnt, item, index);
          }
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)().UPLOAD_FILE_REMOVE
        })]) : (0, _vue.createCommentVNode)()])]);
      });
    };
    const renderFileAction = isMoreView => {
      const {
        showUploadButton,
        buttonText,
        buttonIcon,
        showButtonText,
        showButtonIcon,
        autoHiddenButton
      } = props;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const defHintText = computedDefHintText.value;
      const overCount = computeOverCount.value;
      const defaultSlot = slots.default;
      const tipSlot = slots.tip || slots.hint;
      if (formReadonly || !showUploadButton) {
        return (0, _vue.createCommentVNode)();
      }
      return (0, _vue.h)('div', {
        class: 'vxe-upload--file-action'
      }, [autoHiddenButton && overCount ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
        class: 'vxe-upload--file-action-btn',
        onClick: clickEvent
      }, defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({
        $upload: $xeUpload
      })) : [(0, _vue.h)(_button.default, {
        class: 'vxe-upload--file-action-button',
        content: isMoreView || showButtonText ? buttonText ? `${buttonText}` : (0, _ui.getI18n)('vxe.upload.fileBtnText') : '',
        icon: showButtonIcon ? buttonIcon || (0, _ui.getIcon)().UPLOAD_FILE_ADD : '',
        disabled: isDisabled
      })]), isMoreView && (defHintText || tipSlot) ? (0, _vue.h)('div', {
        class: 'vxe-upload--file-action-tip'
      }, tipSlot ? (0, _vn.getSlotVNs)(tipSlot({
        $upload: $xeUpload
      })) : defHintText) : (0, _vue.createCommentVNode)()]);
    };
    const renderAllMode = () => {
      const {
        moreConfig,
        dragSort
      } = props;
      const {
        fileList,
        isDragMove
      } = reactData;
      const moreOpts = computeMoreOpts.value;
      const {
        maxCount,
        showMoreButton,
        layout
      } = moreOpts;
      const isHorizontal = layout === 'horizontal';
      let currList = fileList;
      let overMaxNum = 0;
      if (maxCount && fileList.length > maxCount) {
        overMaxNum = fileList.length - maxCount;
        currList = fileList.slice(0, maxCount);
      }
      return (0, _vue.h)('div', {
        key: 'all',
        class: 'vxe-upload--file-wrapper'
      }, [showMoreButton && moreConfig && isHorizontal ? (0, _vue.createCommentVNode)() : renderFileAction(true), currList.length || showMoreButton && isHorizontal ? (0, _vue.h)('div', {
        class: ['vxe-upload--file-list-wrapper', {
          'is--horizontal': isHorizontal
        }]
      }, [currList.length ? dragSort ? (0, _vue.h)(_vue.TransitionGroup, {
        name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
        tag: 'div',
        class: 'vxe-upload--file-list'
      }, {
        default: () => renderFileItemList(currList, false)
      }) : (0, _vue.h)('div', {
        class: 'vxe-upload--file-list'
      }, renderFileItemList(currList, false)) : (0, _vue.createCommentVNode)(), showMoreButton && overMaxNum ? (0, _vue.h)('div', {
        class: 'vxe-upload--file-over-more'
      }, [(0, _vue.h)(_button.default, {
        mode: 'text',
        content: (0, _ui.getI18n)('vxe.upload.moreBtnText', [fileList.length]),
        status: 'primary',
        onClick: handleMoreEvent
      })]) : (0, _vue.createCommentVNode)(), showMoreButton && moreConfig && isHorizontal ? renderFileAction(false) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]);
    };
    const renderImageItemList = (currList, isMoreView) => {
      const {
        showRemoveButton,
        showProgress,
        progressText,
        showPreview,
        showErrorStatus,
        dragSort
      } = props;
      const {
        fileCacheMaps
      } = reactData;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const imageOpts = computeImageOpts.value;
      const imgStyle = computeImgStyle.value;
      const cornerSlot = slots.corner;
      const ons = {
        onMousedown: handleItemMousedownEvent
      };
      if (dragSort && currList.length > 1) {
        ons.onDragstart = handleDragSortDragstartEvent;
        ons.onDragover = handleDragSortDragoverEvent;
        ons.onDragend = handleDragSortDragendEvent;
      }
      return currList.map((item, index) => {
        const fileKey = getFieldKey(item);
        const cacheItem = fileCacheMaps[fileKey];
        const isLoading = cacheItem && cacheItem.loading;
        const isError = cacheItem && cacheItem.status === 'error';
        return (0, _vue.h)('div', Object.assign({
          key: dragSort ? fileKey : index,
          class: ['vxe-upload--image-item', {
            'is--preview': showPreview,
            'is--circle': imageOpts.circle,
            'is--loading': isLoading,
            'is--error': isError
          }],
          fileid: fileKey,
          draggable: dragSort ? true : null
        }, ons), [(0, _vue.h)('div', {
          class: 'vxe-upload--image-item-box',
          style: isMoreView ? null : imgStyle,
          title: (0, _ui.getI18n)('vxe.upload.viewItemTitle'),
          onClick(evnt) {
            if (!isLoading && !isError) {
              handlePreviewImageEvent(evnt, item, index);
            }
          }
        }, [isLoading && cacheItem ? (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-loading'
        }, [(0, _vue.h)('div', {
          class: 'vxe-upload--image-item-loading-icon'
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)().UPLOAD_LOADING
        })]), showProgress ? (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-loading-text'
        }, progressText ? _xeUtils.default.toFormatString(progressText, {
          percent: cacheItem.percent
        }) : (0, _ui.getI18n)('vxe.upload.uploadProgress', [cacheItem.percent])) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)(), !isLoading ? isError && showErrorStatus ? (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-error'
        }, [(0, _vue.h)(_button.default, {
          icon: (0, _ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD,
          mode: 'text',
          status: 'primary',
          content: (0, _ui.getI18n)('vxe.upload.reUpload'),
          onClick() {
            handleReUpload(item);
          }
        })]) : (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-img-wrapper'
        }, [(0, _vue.h)('img', {
          class: 'vxe-upload--image-item-img',
          src: getThumbnailFileUrl(item)
        })]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-btn-wrapper',
          onClick(evnt) {
            evnt.stopPropagation();
          }
        }, [cornerSlot ? (0, _vue.h)('div', {
          class: 'vxe-upload--file-item-corner'
        }, (0, _vn.getSlotVNs)(cornerSlot({
          option: item,
          isMoreView,
          readonly: formReadonly
        }))) : (0, _vue.createCommentVNode)(), showRemoveButton && !formReadonly && !isDisabled && !isLoading ? (0, _vue.h)('div', {
          class: 'vxe-upload--image-item-remove-btn',
          onClick(evnt) {
            evnt.stopPropagation();
            removeFileEvent(evnt, item, index);
          }
        }, [(0, _vue.h)('i', {
          class: (0, _ui.getIcon)().UPLOAD_IMAGE_REMOVE
        })]) : (0, _vue.createCommentVNode)()])])]);
      });
    };
    const renderImageAction = isMoreView => {
      const {
        showUploadButton,
        buttonText,
        buttonIcon,
        showButtonText,
        showButtonIcon,
        autoHiddenButton
      } = props;
      const formReadonly = computeFormReadonly.value;
      const defHintText = computedDefHintText.value;
      const overCount = computeOverCount.value;
      const imgStyle = computeImgStyle.value;
      const defaultSlot = slots.default;
      const hintSlot = slots.hint;
      if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
        return (0, _vue.createCommentVNode)();
      }
      return (0, _vue.h)('div', {
        key: 'action',
        class: 'vxe-upload--image-action'
      }, [(0, _vue.h)('div', {
        class: 'vxe-upload--image-action-btn',
        onClick: clickEvent
      }, defaultSlot ? defaultSlot({
        $upload: $xeUpload
      }) : [(0, _vue.h)('div', {
        class: 'vxe-upload--image-action-box',
        style: isMoreView ? null : imgStyle
      }, [showButtonIcon ? (0, _vue.h)('div', {
        class: 'vxe-upload--image-action-icon'
      }, [(0, _vue.h)('i', {
        class: buttonIcon || (0, _ui.getIcon)().UPLOAD_IMAGE_ADD
      })]) : (0, _vue.createCommentVNode)(), isMoreView || showButtonText ? (0, _vue.h)('div', {
        class: 'vxe-upload--image-action-content'
      }, buttonText ? `${buttonText}` : (0, _ui.getI18n)('vxe.upload.imgBtnText')) : (0, _vue.createCommentVNode)(), isMoreView && (defHintText || hintSlot) ? (0, _vue.h)('div', {
        class: 'vxe-upload--image-action-hint'
      }, hintSlot ? (0, _vn.getSlotVNs)(hintSlot({
        $upload: $xeUpload
      })) : defHintText) : (0, _vue.createCommentVNode)()])])]);
    };
    const renderImageMode = () => {
      const {
        dragSort
      } = props;
      const {
        fileList,
        isDragMove
      } = reactData;
      const moreOpts = computeMoreOpts.value;
      const {
        maxCount,
        showMoreButton
      } = moreOpts;
      let currList = fileList;
      let overMaxNum = 0;
      if (maxCount && fileList.length > maxCount) {
        overMaxNum = fileList.length - maxCount;
        currList = fileList.slice(0, maxCount);
      }
      return (0, _vue.h)('div', {
        key: 'image',
        class: 'vxe-upload--image-wrapper'
      }, [dragSort ? (0, _vue.h)(_vue.TransitionGroup, {
        name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
        tag: 'div',
        class: 'vxe-upload--image-list'
      }, {
        default: () => renderImageItemList(currList, false).concat([showMoreButton && overMaxNum ? (0, _vue.h)('div', {
          key: 'om',
          class: 'vxe-upload--image-over-more'
        }, [(0, _vue.h)(_button.default, {
          mode: 'text',
          content: (0, _ui.getI18n)('vxe.upload.moreBtnText', [fileList.length]),
          status: 'primary',
          onClick: handleMoreEvent
        })]) : (0, _vue.createCommentVNode)(), renderImageAction(false)])
      }) : (0, _vue.h)('div', {
        class: 'vxe-upload--image-list'
      }, renderImageItemList(currList, false).concat([showMoreButton && overMaxNum ? (0, _vue.h)('div', {
        class: 'vxe-upload--image-over-more'
      }, [(0, _vue.h)(_button.default, {
        mode: 'text',
        content: (0, _ui.getI18n)('vxe.upload.moreBtnText', [fileList.length]),
        status: 'primary',
        onClick: handleMoreEvent
      })]) : (0, _vue.createCommentVNode)(), renderImageAction(false)]))]);
    };
    const renderVN = () => {
      const {
        showErrorStatus,
        dragToUpload,
        pasteToUpload,
        dragSort
      } = props;
      const {
        isDragUploadStatus,
        showMorePopup,
        isActivated,
        dragIndex
      } = reactData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const isImage = computeIsImage.value;
      const ons = {
        onMousedown: handleItemMousedownEvent
      };
      if (dragToUpload && dragIndex === -1) {
        ons.onDragover = handleUploadDragoverEvent;
        ons.onDragleave = handleUploadDragleaveEvent;
        ons.onDrop = handleUploadDropEvent;
      }
      return (0, _vue.h)('div', Object.assign({
        ref: refElem,
        class: ['vxe-upload', {
          [`size--${vSize}`]: vSize,
          'is--active': isActivated,
          'is--readonly': formReadonly,
          'is--disabled': isDisabled,
          'is--paste': pasteToUpload,
          'show--error': showErrorStatus,
          'is--drag': isDragUploadStatus
        }]
      }, ons), [isImage ? renderImageMode() : renderAllMode(), dragSort ? (0, _vue.h)('div', {
        ref: refDragLineElem,
        class: 'vxe-upload--drag-line'
      }) : (0, _ui.renderEmptyElement)($xeUpload), isDragUploadStatus && !showMorePopup ? (0, _vue.h)('div', {
        class: 'vxe-upload--drag-placeholder'
      }, (0, _ui.getI18n)('vxe.upload.dragPlaceholder')) : (0, _ui.renderEmptyElement)($xeUpload)]);
    };
    const listFlag = (0, _vue.ref)(0);
    (0, _vue.watch)(() => props.modelValue ? props.modelValue.length : 0, () => {
      listFlag.value++;
    });
    (0, _vue.watch)(() => props.modelValue, () => {
      listFlag.value++;
    });
    (0, _vue.watch)(listFlag, () => {
      updateFileList();
    });
    (0, _vue.onMounted)(() => {
      if (process.env.NODE_ENV === 'development') {
        if (props.multiple && props.singleMode) {
          (0, _log.errLog)('vxe.error.errConflicts', ['multiple', 'single-mode']);
        }
        if (props.imageStyle) {
          (0, _log.warnLog)('vxe.error.delProp', ['image-style', 'image-config']);
        }
      }
      if (props.dragSort) {
        (0, _dom.initTpImg)();
      }
      _ui.globalEvents.on($xeUpload, 'paste', handleGlobalPasteEvent);
      _ui.globalEvents.on($xeUpload, 'mousedown', handleGlobalMousedownEvent);
      _ui.globalEvents.on($xeUpload, 'blur', handleGlobalBlurEvent);
    });
    (0, _vue.onUnmounted)(() => {
      reactData.isDragUploadStatus = false;
      _ui.globalEvents.off($xeUpload, 'paste');
      _ui.globalEvents.off($xeUpload, 'mousedown');
      _ui.globalEvents.off($xeUpload, 'blur');
    });
    updateFileList();
    $xeUpload.renderVN = renderVN;
    return $xeUpload;
  },
  render() {
    return this.renderVN();
  }
});